<%--
  Created by IntelliJ IDEA.
  User: 无论 而且
  Date: 2023/4/13
  Time: 14:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 40px;
            position: relative;
            /*position: relative;*/
            /*width: 400px;*/
            /*border-bottom: 1px solid #ccc;*/
            /*margin: 100px auto;*/
        }

        .box input {
            width: 300px;
            height: 30px;
            /*width: 370px;*/
            /*height: 30px;*/
            /*!*border: 0;*!*/
            /*outline: none;*/
        }

        .box img {
            position: absolute;
            top: 2px;
            right: 2px;
            width: 24px;
        }

    </style>
</head>
<body>
<div class="box">
    <input type="password" id="input" >
    <img src="../img/icon_1.png" id="eye">
</div>

<script>
    // 1.获取元素
    var input = document.getElementById('input');
    var eye = document.getElementById('eye');
    var flag = 0;
    // 2.注册事件 处理程序
    eye.onclick = function () {
        // 应用flag 可以实现循环点击
        if (flag === 0) {
            // 点击一次后 flag 一定要变化
            input.type = 'password';
            // 修改 -图片路径
            eye.src = "../img/icon_1.png";
            flag = 1;//赋值操作
        } else{
            input.type = 'text';
            // 修改 -图片路径
            eye.src = "../img/icon_2.png";
            flag = 0;
        }

    }
</script>

</body>
</html>
